<script>
/**
 * 带 label 和 input 框的表单项
 * @displayName HdFormItem 表单项
 */
export default {
  name: 'HdFormItem',
  functional: true,
  props: {
    type: Boolean,
    default: false,
  },
  /**
   * 字段可编辑时的内容
   * @slot default
   */
  /**
   * 字段只读时的内容
   * @slot read
   */
  /**
   * 字段可编辑+只读时都使用的内容
   * @slot read-and-edit
   * @binding {boolean} editable 是否为可编辑状态
   */
  /**
   * <p>转发给自动适配组件的插槽</p>
   * <p>比如 input-suffix 会作为 suffix 插槽，传递给内部的组件</p>
   * <p>8.0.5 新增</p>
   * @slot input-*
   */
  render(createElement, context) {
    const readAndEditSlot = context.scopedSlots['read-and-edit'] //继续往下传给子组件的插槽
    if (context.data?.attrs?.readOnly) {
      if (context.slots().read) {
        context.children = context.slots().read
      } else {
        context.children = context.children.map((c) => {
          // console.log(c.data.model.value)
          // switch(c.tag){
          //   case 'el-select'
          // }
          if (c.data?.model) return c.data.model.value
          if (c.componentOptions?.propsData) return c.componentOptions.propsData.value
          return c
        })
      }
    }

    return [
      createElement(
        'div',
        {
          props: context.props,
          on: context.listeners,
          scopedSlots: {
            read: readAndEditSlot,
            ...context.scopedSlots,
          },
        },
        context.children
      ),
    ]
  },
}
</script>

<style module lang="scss"></style>
